<template>
  <div>
    <div class="text-xs mb-1 text-zinc-400">热门精选</div>
    <div class="flex h-[140px] w-full" v-if="themeData.list.length">
      <div
        class="relative rounded-sm w-[380px] cursor-pointer"
        :style="{
          backgroundColor: randomRGB()
        }"
      >
        <img
          class="h-full w-full object-cover rounded-sm"
          v-lazy
          :src="themeData.big.photo"
          alt=""
        />
        <p
          class="absolute bottom-0 left-0 w-full h-[45%] flex items-center backdrop-blur rounded px-1 text-white text-xs duration-300 hover:backdrop-blur-none"
        >
          # {{ themeData.big.title }}
        </p>
      </div>
      <div class="flex flex-wrap flex-1">
        <div
          v-for="item in themeData.list"
          :key="item.id"
          class="h-[45%] w-[260px] text-white text-xs relative ml-1.5 mb-1.5 rounded"
          @click="openNewHtml(item.path)"
          :style="{
            backgroundColor: randomRGB()
          }"
        >
          <img class="w-full h-full object-cover rounded" :src="item.photo" />
          <p
            class="backdrop-blur absolute top-0 left-0 w-full h-full flex items-center px-1 rounded cursor-pointer duration-300 hover:backdrop-blur-none"
          >
            # {{ item.title }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { GetCoverWinnow } from '@/api/Desktop/website/index.js'
import { randomRGB } from '@/utils/color.js'

// 处理主题数据
const themeData = ref({
  big: {},
  list: []
})
const getThemeData = async () => {
  const themes = await GetCoverWinnow()
  themeData.value = {
    big: themes[0],
    list: themes.splice(1, themes.length)
  }
}
//open new html
const openNewHtml = (path) => {
  const link = document.createElement('a')
  link.href = path
  link.target = '_blank'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}
getThemeData()
</script>

<style lang="scss" scoped></style>
